<template>
<div>
<div class='top'>
  <van-search
  v-model="value"
  show-action
   label='上海 '
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
 <template #label >
      上海<van-icon name="location" size='.3rem' @click="$router.push('/city')"/>
    </template>
  <template #action>
    <div @click="onSearch"><van-icon name="guide-o" size=".5rem"/></div>
  </template>
</van-search>
<!-- //lun播图 -->
<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in pigList" :key="index">
    <img v-lazy="'http://liufusong.top:8080'+image.imgSrc" />
  </van-swipe-item>
</van-swipe>

</div>
<div class='middle'>
    <ul>
        <li>
          <span @click="$router.push('/layout/search')">
            <van-icon name="shop-o" size='.9rem'/>
        <p>整租</p>
        </span>

        </li>
        <li>
          <span @click="$router.push('/layout/search')">
            <van-icon name="friends-o" size='.9rem'/>
        <p>合租</p>
        </span>

        </li>
        <li>
            <span @click="$router.push('/layout/search')">
            <van-icon name="point-gift-o" size='.9rem'/>
        <p>地图找房</p>
        </span>

        </li>
        <li>
            <span @click="$router.push('/layout/search')">
            <van-icon name="shop-collect-o" size='.9rem' />
        <p>去出租</p>
        </span>

        </li>
    </ul>
</div>
<div class='title'>
<!-- 两端对齐 -->
<van-row type="flex" justify="space-between">
  <van-col span="6" class='first'>租房小组</van-col>
  <van-col span="6"></van-col>
  <van-col span="6" class='last'>更多</van-col>
</van-row>
  <div class='topic'>
  <div class='first'>
  <div class='img'></div>
    <div class='txt'>家住回龙观归属的感觉</div>
  </div>
<div class='second'>
    <div class='img'></div>
    <div class='txt'>宜居四五环大都市生活</div>
</div>
  </div>
   <div class='topic'>
  <div class='first'>
  <div class='img'></div>
    <div class='txt'>喧嚣三里屯繁华的背后</div>
  </div>
<div class='second'>
    <div class='img'></div>
    <div class='txt'>比邻十号线地铁心连心</div>
</div>
  </div>
  </div>
  </div>
</template>

<script>

import { Swipter } from '@/api'

export default {
  data () {
    return {
      value: '',
      active: 0,
      pigList: []

    }
  },
  async created () {
    const res = await Swipter()
    // console.log(res)
    this.pigList = res.data.body

    console.log(this.images)
  },
  methods: {
    onSearch () {

    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-search__label{
margin-top: -1px;
margin-left: -8px;
}
/deep/ .van-field__left-icon{
  margin-left: 10px;
}
/deep/ .van-swipe-item img{
height: 180px;
width: 100%;
}
.title .topic{
  margin-top: 10px;
height: 75px;
margin-left: 10px;
font-size: 15px;
font-weight: normal;
display: flex;
}
.title .topic .first{
  font-size: 15px;
font-weight: normal;
  width: 48%;
  margin-right: 5px;
display: flex;
background-color: #fff;
}
.title .topic .first .img{
width: 100px;
height: 75px;
}
.title .topic .second{
  width: 48%;
  background-color: #fff;
  margin-right: 5px;
  display: flex;
}
.title .topic .second .img{
 width: 100px;
  height: 75px;

}
.title .topic .second .txt{
margin-top: 10px;
margin-right: 30px;
}
.title .topic .first .txt{
margin-top: 10px;
margin-right: 30px;
}
.title{
  background-color: #f6f5f6;
  height: 215px;

}
/deep/  .van-col{
  padding-right: 5px;
  padding-left: 20px;
  font-size: 16px;
  // margin-left: 8px;
margin-top: 15px;
}
/deep/ .first{
  color:#333333;
  font-weight:700;
}
/deep/ .last{
   font-size: 13px;
   padding-right: 5px;
   padding-top: 3px;
   color:#8c7d82;
}
.middle{
width: 100%;
height: 110px;

margin-top:5px ;
}
.middle ul{
display: flex;
height: 110px;

}
.middle ul li{
width: 25%;
height: 110px;
margin-right:3px ;
// background-color: pink;
padding-top: 10px;
}
.middle ul li span{
text-align: center;
height: 30px;
margin-left:  16px;
border-radius:1px solid  ;
padding-top: 5px;
}
.middle ul li span .van-icon{
  width: 60px;
  height: 60px;
text-align: center;
color: #29b675;
line-height: 60px;
background-color:#f2fbf7;
border-radius: 50%;
border: 1px solid #f2fbf7;
}
.middle ul li  p{
font-size: 14px;
}
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .van-search{
   position: absolute;
    top: 15px;
    width: 100%;
    padding: 0 10px;
    z-index: 2;
 background-color: transparent;
  }
  .my-swipe .van-swipe{
   position: relative;

  }
</style>
